import React, { ReactElement } from 'react'
import { connect } from 'umi'
import { Input } from 'antd'
import styles from './components/HeroCard.less'

const { TextArea } = Input

interface Props {
    setSkillCard: Function
}

function Skill({ setSkillCard }: Props): ReactElement {
    // usageTips  使用技巧
    // battleTips  对抗技巧
    // teamTips   团战思路
    const arr = [
        {
            title: "使用技巧",
            com: "usageTips" 
        },
        {
            title: "对抗技巧",
            com: "battleTips" 
        },
        {
            title: "团战思路",
            com: "teamTips" 
        }
    ]
    return (
        <div>
            {
                arr.map((item: any, index: number) => {
                    return <div key = { index } className={ styles.flex }>
                        <span>
                            { item.title }
                        </span>
                        <div>
                            <TextArea className={ styles.w100 } onChange={(ev) => {
                                setSkillCard(item.com, ev.target.value)
                            }}/>
                        </div>
                    </div>
                })
            }
        </div>
    )
}

const mapState = (state: any) => {
    return {
        
    }
}

const mapDispatch = (dispatch: any) => {
    return {
        setSkillCard(com: string, value: string) {
            dispatch({ type: "heroCard/setSkillCard", com, value })
        }
    }
}


export default connect(mapState, mapDispatch)(Skill)
